<script setup>
// 组件逻辑
</script>

<template>
  <div class="home">
    <!-- 英雄区域 -->
    <section class="hero">
      <div class="container container-md">
        <div class="hero-content text-center">
          <h1 class="hero-title fade-in">
            AI 智能聊天助手
          </h1>
          <p class="hero-subtitle fade-in">
            体验下一代人工智能对话，让沟通更加智能、高效、自然
          </p>
          <div class="hero-actions fade-in">
            <router-link to="/auth" class="btn btn-primary">
              开始使用
            </router-link>
            <router-link to="/chat" class="btn btn-secondary">
              体验演示
            </router-link>
          </div>
        </div>
      </div>
    </section>

    <!-- 特性展示 -->
    <section class="features">
      <div class="container">
        <div class="features-header text-center mb-xl">
          <h2 class="features-title">核心特性</h2>
          <p class="features-subtitle">专为现代用户设计的智能聊天体验</p>
        </div>
        
        <div class="grid grid-cols-3 gap-lg">
          <div class="feature-card card slide-in">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
              </svg>
            </div>
            <h3 class="feature-title">智能对话</h3>
            <p class="feature-description">
              基于先进的语言模型，提供自然流畅的对话体验，理解上下文，给出准确回应。
            </p>
          </div>

          <div class="feature-card card slide-in">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
              </svg>
            </div>
            <h3 class="feature-title">多领域知识</h3>
            <p class="feature-description">
              涵盖科技、文化、教育、商业等多个领域，为您提供专业、全面的信息支持。
            </p>
          </div>

          <div class="feature-card card slide-in">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
              </svg>
            </div>
            <h3 class="feature-title">实时响应</h3>
            <p class="feature-description">
              毫秒级响应速度，即时反馈，让您的对话更加流畅自然，提升沟通效率。
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 使用流程 -->
    <section class="workflow">
      <div class="container">
        <div class="workflow-header text-center mb-xl">
          <h2 class="workflow-title">使用流程</h2>
          <p class="workflow-subtitle">简单三步，开启智能对话之旅</p>
        </div>
        
        <div class="workflow-steps">
          <div class="workflow-step">
            <div class="step-number">1</div>
            <div class="step-content">
              <h3>注册账号</h3>
              <p>快速创建您的专属账号，开始个性化体验</p>
            </div>
          </div>
          
          <div class="workflow-step">
            <div class="step-number">2</div>
            <div class="step-content">
              <h3>开始对话</h3>
              <p>输入您的问题或想法，AI助手将为您提供帮助</p>
            </div>
          </div>
          
          <div class="workflow-step">
            <div class="step-number">3</div>
            <div class="step-content">
              <h3>持续学习</h3>
              <p>AI会记住您的偏好，提供越来越精准的服务</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 行动召唤 -->
    <section class="cta">
      <div class="container container-md text-center">
        <h2 class="cta-title">准备开始了吗？</h2>
        <p class="cta-subtitle">加入我们，体验AI带来的无限可能</p>
        <div class="cta-actions">
          <router-link to="/auth" class="btn btn-primary">
            立即注册
          </router-link>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.home {
  min-height: 100vh;
  background: var(--color-background);
}

/* 英雄区域 */
.hero {
  padding: var(--space-2xl) 0;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-background-mute);
}

.hero-content {
  max-width: 600px;
  margin: 0 auto;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-lg);
  color: var(--color-heading);
  letter-spacing: -0.03em;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* 特性区域 */
.features {
  padding: var(--space-2xl) 0;
  background: var(--color-background-soft);
}

.features-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-heading);
}

.features-subtitle {
  font-size: 1.125rem;
  color: var(--color-text-light);
  max-width: 500px;
  margin: 0 auto;
}

.feature-card {
  text-align: center;
  padding: var(--space-xl);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-background);
  border: 2px solid var(--color-background-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  color: var(--color-primary);
  transition: all 0.2s ease;
}

.feature-card:hover .feature-icon {
  border-color: var(--color-primary);
  transform: scale(1.05);
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--color-heading);
}

.feature-description {
  color: var(--color-text-light);
  line-height: 1.6;
  flex-grow: 1;
}

/* 工作流程 */
.workflow {
  padding: var(--space-2xl) 0;
  background: var(--color-background);
}

.workflow-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-heading);
}

.workflow-subtitle {
  font-size: 1.125rem;
  color: var(--color-text-light);
  max-width: 500px;
  margin: 0 auto;
}

.workflow-steps {
  max-width: 800px;
  margin: 0 auto;
}

.workflow-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.workflow-step:hover {
  background: var(--color-background-soft);
}

.step-number {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

.step-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-heading);
}

.step-content p {
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
}

/* 行动召唤 */
.cta {
  padding: var(--space-2xl) 0;
  background: var(--color-background-soft);
  border-top: 1px solid var(--color-background-mute);
}

.cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-heading);
}

.cta-subtitle {
  font-size: 1.125rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
}

.cta-actions {
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.125rem;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
  
  .workflow-step {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  
  .step-number {
    margin-bottom: var(--space-md);
  }
}

@media (max-width: 640px) {
  .hero {
    padding: var(--space-xl) 0;
  }
  
  .features,
  .workflow,
  .cta {
    padding: var(--space-xl) 0;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .features-title,
  .workflow-title,
  .cta-title {
    font-size: 2rem;
  }
}
</style>
